import useDomOverlay from "./useDomOverlay";
export default function (fm, es, i) {
	i = fm.window ? fm.window.index + i : 0
	if (i < 0 || i >= es.length) i = 0
	let e = es[i]
	let domWindow = useDomOverlay()
	if (fm.window) fm.window.setMap(null)
	fm.window = new domWindow({
		map: fm.map,
		position: new TMap.LatLng(e.latitude, e.longitude),
		content:`
			<div id="DOM_WIN" class="animation-zoomIn" style="background-color: #fff;display: flex;flex-direction: row;padding: 10px;border-radius: 10px;box-shadow: 1px 1px 10px #ccc;">
				<div style="width: 160px;display: flex;flex-direction: column;align-items: center;justify-content: center;">
					<img id="DOM_WIN_IMG" src="${e.imgUrl}" style="width: 145px;height: 145px;object-fit: cover;cursor: pointer;"/>
				</div>
				<div style="width: auto;max-width: 200px;padding: 10px;display: flex;flex-direction: column;font-size: 14px;color: #999;">
					<b style="font-size: 16px;color: #666;margin-bottom: 6px;max-width: 160px;">${e.title}</b>
					<i style="font-style: normal;margin-bottom: 3px;max-width: 160px;">${e.address}</i>
					<i style="font-style: normal;margin-bottom: 3px;max-width: 160px;">${e.markTime}</i>
					<button id="DOM_WIN_TRACK" style="cursor: pointer;	outline: none;border: 0;padding: 8px;margin: 5px;color: #fff;background-color: rgb(21, 220, 155);">
						<i class="iconfont icon-tijiao" style="margin-right: 5px;"></i>去下一地点
					</button>
					<div style="display: ${es.length>1?'flex':'none'};flex-direction: row;padding: 3px 0;width: 200px;">
						<u id="DOM_WIN_PREV" style="cursor: pointer;display:${i>0?'inline':'none'};margin: 0 6px;">上一条</u>
						<u id="DOM_WIN_NEXT" style="cursor: pointer;display:${i>=0 && i<es.length-1?'inline':'none'};">下一条</u>
						<i style="margin: 0 6px;">当前${i+1}/${es.length}条</i>
					</div>
				</div>
				<div id="DOM_WIN_CLOSE" style="position: absolute;top: 0;right: 0;cursor: pointer;padding: 2px;padding-right: 6px;">
					<i class="iconfont icon-guanbi" style="color: #999;"></i>
				</div>
				<div id="DOM_WIN_TAIL" style="display: none;width: 100%;position: absolute;bottom: -29px;left: 0;align-items: center;justify-content: center;">
					<div style="width:0px;height:0px;border:15px solid transparent;border-top-color:#fff;"></div>
				</div>
			</div>
		`,
		data: e
	})
	
	// 位置设置
	let domWin = document.getElementById('DOM_WIN')
	let marginBottom = domWin.clientHeight+72
	// console.log(domWin.getBoundingClientRect())
	domWin.style.cssText = `margin-bottom:${marginBottom}px;${domWin.style.cssText}`
	let domWinTail = document.getElementById('DOM_WIN_TAIL')
	setTimeout(() => {
		domWinTail.style.cssText = `margin-bottom:${marginBottom}px;${domWinTail.style.cssText}`
		domWinTail.style.display = 'flex'
	}, 300);
	// 关闭窗口
	document.getElementById('DOM_WIN_CLOSE').addEventListener('click',()=>{
		fm.window.setMap(null)
	})

	fm.window.index = i
	fm.map.panTo(new TMap.LatLng(e.latitude+0.00001, e.longitude))
	setTimeout(() => {
		fm.map.panTo(new TMap.LatLng(e.latitude, e.longitude))
	}, 100);
	
	return fm
}

// fm = useDomWin(fm,data)
// document.getElementById('DOM_WIN_IMG').addEventListener('click',fun) //点击图片
// document.getElementById('DOM_WIN_TRACK').addEventListener('click',fun)  //点击播放足迹